<script setup lang="ts">
import { ref, onMounted, reactive } from "vue";
import FooterNav from "./FooterNav.vue";
import TopNav from "./TopNav.vue";
import CommentMenu from "./CommentMenu.vue";
import { getClassById } from "@/api/student/he/frontClass";
import { useRoute } from "vue-router";
import { classFrontStore } from "@/stores/frontData/he/class";
import { showRemark } from "@/api/student/he/frontClass";
import router from "@/router";

const store = classFrontStore();
const id = useRoute().query.classId;
// console.log(store.classs[0].videoVos);

let classs: any = reactive([]);
let remark: any = reactive([]);
onMounted(() => {
  getClassById(id).then((res) => {
    // console.log(res);
    // classs.length == 0;
    if (res.data.msg == "请求成功") {
      store.getclasss(res.data.data);
      // console.log(store.classs);
    }
  });

  showRemark(id, 5, 1).then((res) => {
    remark.length == 0;
    if (res.data.msg == "请求成功") {
      remark.push(res.data.data);
      // console.log(remark);
    }
  });
  // console.log(store.classs[0].videoVos);
});

const activeIndex = ref("1");
const activeIndex2 = ref("1");
const url = ref("");
const handleSelect = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};
const openVideo = (video: any) => {
  // console.log(video);

  url.value = video;
  // console.log(url);
};
</script>
<template>
  <div class="freeClass">
    <!-- <TopNav></TopNav> -->
    <div class="outbox">
      <div class="free-nav">
        全部课程 > IT-互联网 > 互联网运营 > 新媒体运营 >
        思悦教育|短视频上热门好物推荐|短视频制作
      </div>
      <div class="freevedio-box">
        <div class="topword">
          <div class="vedio-box">
            <video controls :src="url"></video>
            <!-- <video
              controls
              src="https://onlineclass2-1256902071.cos.ap-chengdu.myqcloud.com/onlineclass2/4721701771328661.mp4"
            ></video> -->
          </div>
          <div class="rightword">
            <template v-if="store.classs[0].videoVos.length == 0">
              <div class="empty">暂无视频</div>
            </template>
            <template v-else v-for="item in store.classs[0].videoVos">
              <div class="rightwordbox" @click="openVideo(item.video)">
                <div class="numberbox">
                  <div class="number-but">{{ item.id }}</div>
                </div>
                <div class="inwordbox">
                  <div
                    style="color: white; font-size: 15px; margin-bottom: 3px"
                  >
                    {{ item.videoName }}
                  </div>
                  <div style="color: white; font-size: 12px">
                    {{ item.videoDuration }}
                  </div>
                </div>
              </div>
            </template>
          </div>
        </div>

        <div class="bottomword">
          <div class="leftword">
            <h4>
              {{ store.classs[0].className }}&nbsp;&nbsp;

              <span>免费</span>
            </h4>
            <h6>
              最近在学{{ store.classs[0].recentNum }}人
              &nbsp;&nbsp;&nbsp;&nbsp;累计报名{{ store.classs[0].enlistsNum }}人
              &nbsp;&nbsp;&nbsp;&nbsp;好评率100%
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              <span class="iconfont icon-fenxiang foottu"></span>分享
            </h6>
          </div>
          <div class="rightbut">
            <div class="bluebuttom">+免费报名</div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div style="background-color: rgb(228, 228, 228)">
    <div
      style="
        width: 70%;
        margin: 0 auto;
        background-color: rgb(228, 228, 228);
        height: 700px;
        padding-top: 15px;
      "
    >
      <div
        style="width: 70%; background-color: white; height: 610px; float: left"
      >
        <el-menu
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
          router="true"
          style="margin-left: 15px; margin-right: 15px"
        >
          <el-menu-item index="/Catalogue" class="menu1">课程叙述</el-menu-item>
          <el-menu-item index="/ClassInform" class="menu2">目录</el-menu-item>
          <el-menu-item index="/Comment" class="menu3">评论</el-menu-item>
          <!-- <el-sub-menu index="2">
                    <template #title>Workspace</template>
                    <el-menu-item index="2-1">item one</el-menu-item>
                    <el-menu-item index="2-2">item two</el-menu-item>
                    <el-menu-item index="2-3">item three</el-menu-item>
                    <el-sub-menu index="2-4">
                        <template #title>item four</template>
                        <el-menu-item index="2-4-1">item one</el-menu-item>
                        <el-menu-item index="2-4-2">item two</el-menu-item>
                        <el-menu-item index="2-4-3">item three</el-menu-item>
                    </el-sub-menu>
                    </el-sub-menu>
                    <el-menu-item index="3" disabled>Info</el-menu-item> -->
          <!-- <el-menu-item index="4">Orders</el-menu-item> -->
        </el-menu>
        <div style="margin-top: 15px; margin-left: 15px; margin-right: 15px">
          <router-view></router-view>
        </div>
      </div>
      <div
        style="
          width: 25%;
          background-color: white;
          height: 310px;
          float: left;
          margin-left: 20px;
        "
      >
        <div
          style="
            /* outline: 1px solid red; */
            width: 84%;
            height: 60px;
            margin: 0 auto;
            margin-top: 20px;
          "
        >
          <div
            style="
              /* outline: 1px solid red; */
              width: 60px;
              height: 60px;
              float: left;
            "
          ></div>
          <div
            style="
              /* outline: 1px solid red; */
              width: 180px;
              height: 60px;
              float: left;
              margin-left: 13px;
            "
          >
            <div
              style="color: rgb(0, 166, 255); font-size: 14px; margin-top: 5px"
            >
              {{ store.classs[0].teacherInfoVo.name }}老师
            </div>
            <div
              style="
                font-size: 14px;
                margin-top: 14px;
                color: rgb(170, 170, 170);
              "
            >
              {{ store.classs[0].teacherInfoVo.incroduce }}
            </div>
          </div>
        </div>

        <div
          style="
            /* outline: 1px solid red; */
            width: 72%;
            height: 60px;
            margin: 0 auto;
            margin-top: 25px;
          "
        >
          <div
            style="
              /* outline: 1px solid red; */
              width: 31%;
              height: 60px;
              float: left;
              text-align: center;
            "
          >
            <h3 style="margin: 0; font-size: 14px; margin-top: 10px">好评度</h3>
            <h4 style="margin: 0; font-size: 12px; color: gray">
              {{ store.classs[0].teacherInfoVo.rate }}%
            </h4>
          </div>
          <div
            style="
              float: left;
              height: 60px;
              border: 1px solid rgb(184, 184, 184);
            "
          ></div>
          <div
            style="
              /* outline: 1px solid red; */
              width: 31%;
              height: 60px;
              float: left;
              text-align: center;
            "
          >
            <h3 style="margin: 0; font-size: 14px; margin-top: 10px">课程数</h3>
            <h4 style="margin: 0; font-size: 12px; color: gray">
              {{ store.classs[0].teacherInfoVo.accumulatedPlays }}
            </h4>
          </div>
          <div
            style="
              float: left;
              height: 60px;
              border: 1px solid rgb(184, 184, 184);
            "
          ></div>
          <div
            style="
              /* outline: 1px solid red; */
              width: 36%;
              height: 60px;
              float: left;
              text-align: center;
            "
          >
            <h3 style="margin: 0; font-size: 14px; margin-top: 10px">
              学习人次
            </h3>
            <h4 style="margin: 0; font-size: 12px; color: gray">
              {{ store.classs[0].teacherInfoVo.accumulatedPlays }}
            </h4>
          </div>
        </div>

        <div
          style="
            /* outline: 1px solid red; */
            width: 84%;
            height: 120px;
            margin: 0 auto;
            margin-top: 10px;
          "
        >
          {{ store.classs[0].teacherInfoVo.personalIntroduction }}
        </div>
      </div>
    </div>
  </div>
  <!-- <FooterNav></FooterNav> -->
</template>
<style scoped>
.freeClass {
  width: 80%;
  margin: auto;
}
.free-nav {
  height: 60px;
  width: 100%;
  line-height: 60px;
  /* border: 1px solid #ad5353; */
}
.freevedio-box {
  height: 450px;
  /* border: 1px solid #ad5353; */
  width: 100%;
}
.topword {
  height: 370px;
  width: 100%;
}
.vedio-box {
  height: 370px;
  width: 75%;
  /* outline: 1px solid #535aad; */
  float: left;
  background-color: rgb(1, 1, 1);
}
video {
  height: 370px;
  width: 100%;
}
.rightword {
  height: 370px;
  width: 25%;
  /* outline: 1px solid #535aad; */
  float: left;
  background-color: rgb(26, 26, 26);
}
.bottomword {
  height: 80px;
  width: 100%;
  background-color: rgb(52, 52, 52);
}
.leftword {
  /* outline: 1px solid #a553ad; */
  float: left;
  height: 80px;
  width: 75%;
}
.rightbut {
  /* outline: 1px solid #a553ad; */
  float: left;
  height: 80px;
  width: 25%;
}
.bluebuttom {
  height: 50px;
  width: 90%;
  background-color: rgb(28, 179, 255);
  margin: 0 auto;
  margin-top: 10px;
  border-radius: 5px;
  text-align: center;
  line-height: 50px;
  color: white;
}
h4 {
  margin: 0;
  margin-top: 10px;
  margin-left: 10px;
  color: white;
}
h4 span {
  color: red;
}
h6 {
  margin: 0;
  margin-top: 15px;
  margin-inline-start: 10px;
  color: white;
}
.outbox {
  width: 90%;
  margin: 0 auto;
}
.rightwordbox {
  height: 40px;
  /* border: 1px solid #ad5353; */
  padding-top: 20px;
}
.numberbox {
  width: 20%;
  /* border: 1px solid #ad5353; */
  height: 40px;
  float: left;
}
.number-but {
  background-color: aliceblue;
  width: 40px;
  height: 20px;
  margin-left: 10px;
  margin-top: -5px;
  border: 0;
  border-radius: 5px;
  color: gray;
  text-align: center;
}
.inwordbox {
  /* outline: 1px solid #ad5353; */
  height: 40px;
  width: 78%;
  float: left;
}

.empty {
  text-align: center;
  margin-top: 50px;
  color: white;
}

.menu1 {
  width: 90px;
}
.menu2 {
  width: 90px;
}
.menu3 {
  width: 90px;
}
</style>
